<template>
  <div>
    <el-form ref="form" :model="form" style="margin-right: 80px">
      <el-form-item label="">
        <el-select v-model="form.homestatus" placeholder="入住状态" style="width: 200px; margin-right: 10px">
          <el-option label="已入住" :value="1"></el-option>
          <el-option label="未入住" :value="2"></el-option>
        </el-select>
        <el-input v-model="form.unitname" placeholder="单元名称" style="width: 200px; margin-right: 10px"></el-input>
        <el-input v-model="form.buildnum" placeholder="幢号" style="width: 200px; margin-right: 10px"></el-input>
        <el-input v-model="form.homenum" placeholder="房号" style="width: 200px; margin-right: 10px"></el-input>
        <el-input v-model="form.homename" placeholder="住客姓名" style="width: 200px; margin-right: 10px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button type="success" icon="el-icon-upload2" @click="daochu">
          批量导出</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="Dels()">
          批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%" text-align="center"
      :header-cell-style="{ 'background-color': '#eee', color: '#000' }" ref="multipleTable" tooltip-effect="dark"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- <el-table-column prop="total" label="序号" width="180"> </el-table-column> -->
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="unitname" label="单元名称" width="180">
      </el-table-column>
      <el-table-column prop="buildnum" label="幢号">
        <template slot-scope="scope">
          <span>{{ scope.row.buildnum ? scope.row.buildnum : "暂无" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="storeynum" label="楼层号">
        <template slot-scope="scope">
          <span>{{ scope.row.storeynum ? scope.row.storeynum : "暂无" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="homenum" label="房号">
        <template slot-scope="scope">
          <span>{{ scope.row.homenum ? scope.row.homenum : "暂无" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="homename" label="住客姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.homename ? scope.row.homename : "暂无" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unitstatus" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.unitstatus == 1">已入住</span>
          <span v-if="scope.row.unitstatus == 2">未入住</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <div style="display: flex; margin-left: -10px">
            <el-button :plain="true" :id="'white_list_handle_edit' + scope.$index" size="mini"
              style="color: #62a8ea; background-color: #fff; font-size: 12px" @click="edit(scope.row)">编辑</el-button>
            <el-button :plain="true" size="mini" style="font-size: 12px; color: black; background-color: #fff"
              type="danger" @click="deleteData(scope.row.id)">删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 使用分页 -->
    <Pagination :total="total" @SizeChange="changeCount" @CurrentChange="changePage">
    </Pagination>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination/Pagination";
import { export2Excel } from "@/utils/util";
export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      value1: "",
      input: "",
      tableData: [],
      stripe: true,
      form: {
        homestatus: "",
        unitname: "",
        buildnum: "",
        homenum: "",
        homename: "",
        currPage: 0,
        pageNum: 10,
      },
      columns: [
        { title: "序号", key: "index" },
        { title: "单元名称", key: "unitname" },
        { title: "幢号", key: "buildnum" },
        { title: "楼层号", key: "storeynum" },
        { title: "房号", key: "homenum" },
        { title: "住客姓名", key: "homename" },
        { title: "状态", key: "homestatus" },
      ],
      multipleSelection: [],
    };

    shortcuts: [
      {
        text: "今天",
        onClick(picker) {
          picker.$emit("pick", new Date());
        },
      },
      {
        text: "昨天",
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit("pick", date);
        },
      },
      {
        text: "一周前",
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", date);
        },
      },
    ];
  },
  methods: {
    //分页
    changeCount(val) {
      this.pageNum = val;
    },
    changePage(val) {
      this.currPage = val;
    },
    // 查找接口
    GetFind() {
      this.$axiosToken({
        url: "/house/searchnumList",
        method: "get",
        data: this.form,
        success: (res) => {
          this.tableData = res.data;
          this.total = res.total;
        },
      });
    },
    // 查询
    handleFilter() {
      this.form.currPage = 0;
      console.log(this.form);
      this.GetFind();
    },
    //批量导出
    daochu() {
      if (this.multipleSelection == "") {
        this.$confirm("请选择要导出的房屋信息", "提示", {
          // type: "warning",
        });
      } else {
        this.$confirm("确定全量导出excel文件？", "提示", {
          type: "warning",
        })
          .then(() => {
            export2Excel(this.columns, this.tableData);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消全量导出",
            });
          });
      }
    },
    //批量删除
    Dels() {
      if (this.multipleSelection.length != 0) {
        this.$confirm("确定要删除房屋信息吗？", "提示", {
          type: "warning",
        });
        let ids = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id);
        }
        this.$axiosToken({
          url: "/house/delnumList",
          method: "get",
          data: { ids: ids },
          success: (res) => {
            this.$message({
              showClose: true,
              message: "房号信息删除成功",
              type: "success",
            });
            this.getList();
          },
        });
      }
    },
    //单个删除
    deleteData(id) {
      this.$confirm("确定删除该单元信息？", "提示", {
        type: "warning",
      }).then(() => {
        this.$axiosToken({
          url: "/house/delunitList",
          method: "get",
          data: { id: id },
          success: (result) => {
            console.log(result, "123"),
              this.$message({
                message: "房号信息删除成功",
                type: "success",
              });
            this.getList();
          },
        });
      });
    },
    // 选中状态
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection, "wwwwww");
    },
    //
    //列表
    getList() {
      this.$Axios({
        url: "/house/gethouseList",
        method: "get",
        data: this.form,
        success: (res) => {
          this.tableData = res.data;
          this.total = res.total;
          console.log(res, "入住");
        },
      });
    },
    // 编辑
    edit(row) {
      this.$router.push({
        path: "/house/numAdd",
        query: {
          editId: row.id,
        },
      });
      //    this.$Axios({
      //   url: "/house/getDetailId",
      //   method: "get",
      //   data: this.form,
      //   success: (res) => {
      //     this.tableData = res.data;
      //     this.total = res.total;
      //     console.log(res, "编辑");

      //   },
      // });
    },
  },
  //
  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
//表头居中
::v-deep.el-table {
  th.el-table__cell>.cell {
    text-align: center;
  }
}

// 数据居中
::v-deep.el-table--enable-row-transition {
  .el-table__body td.el-table__cell {
    text-align: center;
  }
}

.el-button--primary.is-plain {
  background: none;
  border-color: #ccc;
}

::v-deep.el-button--primary.is-plain:hover {
  border-color: #409eff;
  color: #409eff;
}

.el-button--danger.is-plain {
  background: none;
  color: #000;
}

:v-deep.el-input--small {
  .el-input__inner {
    width: 200px;
    display: inline;
  }
}

v-deep.el-form-item__content {
  .el-input--small {
    margin-right: 10px;
  }
}
</style>